{include file="$header"}
<div id="app" v-cloak>
    <div class="el-layout">
        <el-tabs :tab-position="document.body.clientWidth > 768 ? 'left' : 'top'" @tab-click="getParameter()">
    		<el-tab-pane label="语言列表">
    		    <div class="el-pane-warp">
                    <el-curd 
                        :field="field"
                        :copy-multiple="false"
                        :search-date="false"
                        :search-keyword="false"
                        :table-operation-width="250"
                        @get-data="refresh($event)"
                        preview>
                    </el-curd>
                </div>
            </el-tab-pane>
            <el-tab-pane label="语言参数">
    		    <div class="el-pane-warp">
                    <el-form ref="search" size="small" :inline="true" @submit.native.prevent>
                        <el-form-item prop="keyword">
                            <el-input placeholder="根据语言/参数搜索" v-model="keyword">
                                <el-button slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item class="el-button-form">
                            <el-input placeholder="请输入语言参数" v-model="name" @keyup.enter.native="addParameter()">
                                <el-button slot="append" type="primary" icon="el-icon-plus" @click="addParameter()">添加参数</el-button>
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <template v-for="(item1, index) in searchlist">
                    <el-card style="margin-top:10px">
                        <div style="height: 20px;" slot="header">
                            <div style="float: left;">参数：{{item1.name}}</div>
                            <div style="float: right;">
                                <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="removeParameter(index,item1)"></el-button>
                            </div>
                        </div>
                        <div v-for="(item2, index2) in item1.parameter" class="item">
                            <el-input style="margin-top:10px" placeholder="请输入内容" v-model="item2.value" @change="updateParameter(item2)">
                                <template slot="prepend">{{item2.lang_title}}</template>
                            </el-input>
                        </div>
                    </el-card>
                    </template>
                </div>
            </el-tab-pane>
        </el-tabs>    
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                keyword: "",
                name: "",
                list: [],
                langList: [],
                field: [
                    {
                        label: '编号', 
                        prop: 'id',
                        table: false,
                    },
                    {
                        prop: 'cover', 
                        label: '封面', 
                        table: {is: 'image',width: '70px'},
                        form: {
                            is: 'el-file-select',
                            type: 'image',
                            tips: '请<a href="https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=20107" target="_blank">点击此处</a>选择语言封面，48*32是最佳像素',
                        },
                    },
                    {
                        prop: 'title', 
                        label: '名称', 
                        table: {label: ''},
                        form: {
                            placeholder: '例：日本',
                            rules: [
                                {required: true,message: '请输入语言名称'},
                            ]
                        }
                    },
                    {
                        prop: 'name', 
                        label: '缩写', 
                        table: {sort: true},
                        form: {
                            placeholder: '例：jp',
                            update: false,
                            rules: [
                                {required: true,message: '请输入语言缩写'},
                                {pattern:  /^[A-Za-z0-9_\-]+$/ig,message: '只能输入字母、数字、下划线_、破折号-'},
                            ]
                        }
                    },
                    {
                        prop: 'default',
                        label: '默认',  
                        table: {prop: 'c_default'},
                        form: {
                            is: 'el-switch',
                            default: 0, 
                        },
                    },
                    {
                        prop: 'status',
                        label: '状态',  
                        table: {prop: 'c_status'},
                        form: {
                            is: 'el-switch',
                            default: 1, 
                        },
                    },
                ]
            }
        },
        computed: {
            searchlist() {
                let self = this;
                let list = [];
                self.list.forEach(function (item1, index) {
                    if (item1.name.indexOf(self.keyword) != -1) {
                        list.push(item1);
                    }
                    item1.parameter.forEach(function (item2, index) {
                        if (item2.value.indexOf(self.keyword) != -1 && list.indexOf(item1) == -1) {
                            list.push(item1);
                        }
                    })
                })
                return list;
            }
        },
        created() {
            this.getParameter();
        },
        methods: {
            /**
             * 获取语言参数
             */
            getParameter() {
                let self = this;
                request.post('langParameter/index', {}, function(res) {
                    if (res.status == 'success') {
                        self.list = res.list;  
                        self.langList = res.langList;
                    }
                })
            },
            /**
             * 添加语言参数
             */
            addParameter() {
                let self = this;
                if (self.name != '') {
                    let row = {};
                    row.name = JSON.parse(JSON.stringify(self.name));
                    row.parameter = [];
                    self.langList.forEach(function (item, index) {
                        row.parameter.push({lang: item.name, lang_title: item.title, name: row.name, value: ''});
                    })
                    request.post('langParameter/save',{name: row.name}, function(res) {
                        if (res.status == 'success') {
                            self.list.unshift(row);
                            self.name = '';
                        } else {
                            self.$notify({ showClose: true, message: res.message, type: res.status});
                        }
                    })
                }
            },
            /**
             * 删除语言参数
             */
            removeParameter(index, row) {
                let self = this;
                self.$confirm('确定删除这个语言参数吗？', '', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post('langParameter/delete', {name: row.name}, function(res){
                        if (res.status === 'success') {
                            self.list.splice(index, 1);
                        } else {
                            self.$notify({ showClose: true, message: res.message, type: res.status});
                        }
                        row.uninstallLoading = false;
                    });
                }).catch(() => {});
            },
            /**
             * 更新语言参数
             */
            updateParameter(row) {
                request.post('langParameter/update', row, function(res) {})
            },
            /**
             * 刷新回调
             */
            refresh(res) {
                let arr = [];
                res.data.forEach(function (item, index) {
                    if (item.status === 1) {
                        arr.push(item);
                    }
                });
                parent.parentVm.langAllow = JSON.parse(JSON.stringify(arr));
            }
        },
    })
</script>
{include file="$footer"}